<template>
<div>
    <h2>书单</h2>
    <ul>
        <list-item
            v-for="(item, index) in bookList"
            :key="index"
            :book="item"
        >
            <div class="action-slot">
                <button class="btn-edit">编辑</button>
                <button class="btn-delete" v-on:click="deleteBook(index)">删除</button>
            </div>
        </list-item>
    </ul>
</div>
</template>

<script>
import ListItem from './ListItem.vue'

export default {
  components: {
    ListItem
  },
  props: {
    bookList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    deleteBook (index) {
      this.$emit('delete-book', index)
    }
  }
}
</script>

<style>

</style>
